<template>
  <searchHeader />
  <RightMenu />
  <Audio />
  <!-- 动态绑定类 给背景颜色 -->
  <div class="box" :class="`themeBG-${theme}`">
    <RouterView> </RouterView>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import { storeToRefs } from "pinia";
import { useThemeColor } from "@/store/themeColor";
import RightMenu from "@/components/RightMenu.vue";
import searchHeader from "@/components/searchHeader.vue";
import Audio from "@/components/audio.vue";

const route = useRoute();
const { theme } = storeToRefs(useThemeColor());
const padding = computed(() => (route.meta.AppPadding ? "50px" : "146px"));
</script>

<style lang="less" scoped>
.box {
  margin: 75px 0 0 400px;
  padding: 0 v-bind(padding);
  box-sizing: border-box;
  padding-bottom: 77px;
  overflow: hidden;
}
</style>
